<script type="text/javascript" src="${pageContext.request.contextPath}/static/ueditor/third-party/SyntaxHighlighter/shCore.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery-easyui-1.3.3/jquery.min.js"></script>
<script type="text/javascript">
    SyntaxHighlighter.all();
</script>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<script src="./static/jquery-easyui-1.3.3/jquery.min.js"></script>
<script type="text/javascript" src="./static/jquery-easyui-1.3.3/js/fy-alert.js"></script>
<link rel="stylesheet" type="text/css" href="./static/css/fy-alert.css">

<div class="data_list">
	<div class="data_list_title">
		<img src="${pageContext.request.contextPath}/static/images/blog_show_icon.png"/>
		博客信息
	</div>
	<div>
	   <div class="blog_title"><h3><strong>${blog.title }</strong></h3></div>
	   <div style="padding-left: 330px;padding-bottom: 20px;padding-top: 10px">
		<div class="bshare-custom"><a title="分享到QQ空间" class="bshare-qzone"></a><a title="分享到新浪微博" class="bshare-sinaminiblog"></a><a title="分享到人人网" class="bshare-renren"></a><a title="分享到腾讯微博" class="bshare-qqmb"></a><a title="分享到网易微博" class="bshare-neteasemb"></a><a title="更多平台" class="bshare-more bshare-more-icon more-style-addthis"></a><span class="BSHARE_COUNT bshare-share-count">0</span></div><script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/buttonLite.js#style=-1&amp;uuid=&amp;pophcol=1&amp;lang=zh"></script><script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/bshareC0.js"></script>
	   </div>
		<div class="blog_info">
			发布时间：『 <fmt:formatDate value="${blog.releaseDate }" type="date" pattern="yyyy-MM-dd HH:mm"/>』&nbsp;&nbsp;
			博客类别：${blog.blogType.typeName}&nbsp;&nbsp;阅读(${blog.clickHit}) 评论(${blog.replyHit})

		</div>
		<div class="blog_content">
			${blog.content }
		</div>
		<div class="blog_keyWord">
			<font><strong>关键字：</strong></font>
			<c:choose>
				<c:when test="${keyWords==null}">
					&nbsp;&nbsp;无
				</c:when>
				<c:otherwise>
					<c:forEach var="keyWord" items="${keyWords }">
						&nbsp;&nbsp;<a href="${pageContext.request.contextPath}/blog/q.html?q=${keyWord}" target="_blank">${keyWord }</a>&nbsp;&nbsp;
					</c:forEach>
				</c:otherwise>
			</c:choose>
		</div>
		<div class="blog_lastAndNextPage">
			${pageCode }
		</div>
	</div>
</div>
<div class="data_list">
	<div class="data_list_title">
		<img src="${pageContext.request.contextPath}/static/images/comment_icon.png"/>
		评论信息
            ${content}
		<c:if test="${commentList.size()>6}">
			<a href="javascript:showOtherComment()"  style="float: right;padding-right: 40px;">显示所有评论</a>

		</c:if>
	</div>
	<div class="commentDatas">
		<c:choose>
			<c:when test="${commentList.size()==0}">
				暂无评论
			</c:when>
			<c:otherwise>
				<c:forEach var="comment" items="${commentList }"  varStatus="status">
						<c:choose>

							<c:when test="${status.count<10 }">
								<div class="comment">
									<span><font>${status.count }楼&nbsp;&nbsp;&nbsp;&nbsp;${comment.userIp }：</font>${comment.content }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[&nbsp;<fmt:formatDate value="${comment.createData }" type="date" pattern="yyyy-MM-dd HH:mm"/>&nbsp;]</span>
								</div>								
							</c:when>
							<c:otherwise>
								<div   class="otherComment">
									<div  id="comment1" >
										<span><font>${status.index+1 }楼&nbsp;&nbsp;&nbsp;&nbsp;${comment.userIp }：</font>${comment.content }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[&nbsp;<fmt:formatDate value="${comment.createData }" type="date" pattern="yyyy-MM-dd HH:mm"/>&nbsp;]</span>
									</div>
								</div>						
							</c:otherwise>
						</c:choose>
				</c:forEach>
			</c:otherwise>
		</c:choose>
	</div>
</div>

<div class="data_list" >
	<div class="data_list_title">
		<img src="${pageContext.request.contextPath}/static/images/publish_comment_icon.png"/>
		发表评论
	</div>
	<div class="publish_comment">
			<div>
				<textarea style="width: 100%" rows="3" id="content" name="content" placeholder="来说两句吧..."></textarea>
			</div>
			<div class="verCode" style="margin-top: 20px;">

				<div>
					验证码：
					<input type="text"  id="verify" name="verify" placeholder="请输入验证码" class="bord_vcode"  required />
					<canvas width="100" height="40" id="verifyCanvas"></canvas>
				</div>
				<img style="margin-left: 253px;margin-top: -31px;" id="code_img">
			</div>
			<div class="publishButton">
				<button class="btn btn-primary" type="button" onclick="submitData()">发表评论</button>
			</div>
		</form>
	</div>
</div>
<script type="text/javascript">
<%--	function loadimage(){--%>
<%--		document.getElementById("randImage").src="${pageContext.request.contextPath}/blogServlet&way=comment"+Math.random();--%>
<%--		document.getElementById("randImage").src="${pageContext.request.contextPath}/image.jsp?"+Math.random();--%>
<%--}--%>
	function submitData(){
		var content=$("#content").val();
		var verify=$("#verify").val();
		if(content==null || content==''){
			aniExtend({
				title:"提示",
				content:"请输入评论内容！"
			});
		}else if(verify==null || verify==''){
			aniExtend({
				title:"提示",
				content:"请输入验证码！"
			});
		}
		else{
			console.log({'content':content,'verify':verify,'blog.id':'${blog.id}'})

			$.post("${pageContext.request.contextPath}/blogServlet?way=comment",{'content':content,'verify':verify,'blog.id':'${blog.id}','replyHit':${blog.replyHit}},function(result){
				console.log(result == 'success')
				if(result == 'success'){
					console.log("aaa")
					window.location.reload();
					alert("评论已提交成功，审核通过后显示！");
				}else{
					alert(result.errorInfo);
				}
			},"json");
		}
	}

	function showOtherComment(){
		$('.otherComment').show();
		for (var i =0; i<10; i++){
			$('#comment1').css("display","block");
		}

	}

	$(document).ready(function() {
		//验证验证码
		$("#verify").blur(function() {
			var newRand=rand.join('').toUpperCase();
			console.log(newRand);
			//下面就是判断是否== 的代码，无需解释
			var oValue = $('#verify').val().toUpperCase();
			console.log(oValue)
			if (oValue == 0) {
				aniExtend({
					title:"提示",
					content:"请输入验证码"
				});

			} else if (oValue != newRand) {

				aniExtend({
					title:"提示",
					content:"验证码输入的不对"
				});
			}
		})
	})


	var nums = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K',
		'L', 'M', 'N', 'O', 'P', 'Q', 'R',
		'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm',
		'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x',
		'y', 'z'
	];
	var colors = []
	var rand = new Array();
	drawCode();
	// 绘制验证码
	function drawCode() {
		var canvas = document.getElementById("verifyCanvas"); //获取HTML端画布
		var context = canvas.getContext("2d"); //获取画布2D上下文
		context.fillStyle = "cornflowerblue"; //画布填充色
		context.fillRect(0, 0, canvas.width, canvas.height);
		// 创建渐变
		var gradient = context.createLinearGradient(0, 0, canvas.width, 0);
		gradient.addColorStop("0", "magenta");
		gradient.addColorStop("0.5", "blue");
		gradient.addColorStop("1.0", "red");
		//清空画布
		context.fillStyle = gradient; //设置字体颜色
		context.font = "25px Arial"; //设置字体

		var x = new Array();
		var y = new Array();
		for (var i = 0; i < 4; i++) {
			rand[i] = nums[Math.floor(Math.random() * nums.length)]
			x[i] = i * 16 + 10;
			y[i] = Math.random() * 20 + 20;
			context.fillText(rand[i], x[i], y[i]);
		}
		// console.log(rand);
		//画3条随机线
		for (var i = 0; i < 3; i++) {
			drawline(canvas, context);
		}

		// 画30个随机点
		for (var i = 0; i < 30; i++) {
			drawDot(canvas, context);
		}
		convertCanvasToImage(canvas)


	}
	// 随机线
	function drawline(canvas, context) {
		context.moveTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height)); //随机线的起点x坐标是画布x坐标0位置，y坐标是画布高度的随机数
		context.lineTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height)); //随机线的终点x坐标是画布宽度，y坐标是画布高度的随机数
		context.lineWidth = 0.5; //随机线宽
		context.strokeStyle = 'rgba(50,50,50,0.3)'; //随机线描边属性
		context.stroke(); //描边，即起点描到终点
	}
	// 随机点(所谓画点其实就是画1px像素的线，方法不再赘述)
	function drawDot(canvas, context) {
		var px = Math.floor(Math.random() * canvas.width);
		var py = Math.floor(Math.random() * canvas.height);
		context.moveTo(px, py);
		context.lineTo(px + 1, py + 1);
		context.lineWidth = 0.2;
		context.stroke();

	}
	// 绘制图片
	function convertCanvasToImage(canvas) {
		document.getElementById("verifyCanvas").style.display = "none";
		var image = document.getElementById("code_img");
		image.src = canvas.toDataURL("image/png");
		return image;
	}
	// 点击图片刷新
	document.getElementById('code_img').onclick = function () {
		$('#verifyCanvas').remove();
		$('#verify').after('<canvas width="100" height="40" id="verifyCanvas"></canvas>')
		drawCode();
	}
	//自定义弹出层动画
	function aniExtend(a){
		fyAlert.alert({
			title   : a.title,
			aniExtend:'lightSpeedIn',
			content : a.content,
			btns    : {                  //按钮组
				'确定' : function(obj){
					obj.destory();   //在页面上

				},
				'取消' : function(obj){
					obj.destory(); //销毁

				}
			},
		})
	}
</script>
<style>
	#comment1{
		display: none;
	}
</style>